<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>自定义样式信息窗体</title>
    <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>
    <style type="text/css">
        .info {
            border: solid 1px silver;
        }
        div.info-top {
            position: relative;
            background: none repeat scroll 0 0 #F9F9F9;
            border-bottom: 1px solid #CCC;
            border-radius: 5px 5px 0 0;
        }
        div.info-top div {
            display: inline-block;
            color: #333333;
            font-size: 14px;
            font-weight: bold;
            line-height: 31px;
            padding: 0 10px;
        }
        div.info-top img {
            position: absolute;
            top: 10px;
            right: 10px;
            transition-duration: 0.25s;
        }
        div.info-top img:hover {
            box-shadow: 0px 0px 5px #000;
        }
        div.info-middle {
            font-size: 12px;
            padding: 6px;
            line-height: 20px;
        }
        div.info-bottom {
            height: 0px;
            width: 100%;
            clear: both;
            text-align: center;
        }
        div.info-bottom img {
            position: relative;
            z-index: 104;
        }
        span {
            margin-left: 5px;
            font-size: 11px;
        }
        .info-middle img {
            float: left;
            margin-right: 6px;
        }
        #userdiv{
        	width: 55px;
        	height: 55px;
        	float: right;
        	margin-top: 10px;
        }
        #usercenter{
        	position: absolute;
			z-index: initial;
			width: 50px;
        }
         #drivepanel {
            position: fixed;
            background-color: white;
            max-height: 60%;
            overflow-y: auto;
            top: 10px;
            right: 10px;
            width: 240px;
        }
    </style>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.10&key=e3382cd37af11ea0d46eeccc15251783"></script>
<script type="text/javascript" src="./js/frameMark.js"></script>
<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
   
</head>
<body>
<div id="container"></div>
<div id="panel"></div>

<div id="myPageTop" style="width:60%;height: 40px;margin-right: 15%;">
    <input id="tipinput" style="width: 98%;height: 95%;"/>
</div>

<div id="userdiv">
	<img id="usercenter" onclick="gotoUserCenter()" src="images/user.png" />
</div>

<div id="drivepanel"></div>

<script src="./js/mui.min.js "></script>
<script type="text/javascript">
	mui.init();
	var myLngLat;
	var pitchOnLngLat;

	//地图初始化
    var map = new AMap.Map("container", {
        resizeEnable: true,
        //center:[87.6143354816,43.8129495288],
        zoom: 16
    });
    //addMarker();
    //添加marker标记
    function addMarker(position) {
        map.clearMap();
        var marker = new AMap.Marker({
            map: map,
            position:position
        });
        //鼠标点击marker弹出自定义的信息窗体
        AMap.event.addListener(marker, 'click', function() {
            infoWindow.open(map, marker.getPosition());
        });
    }
    
    //addMarker([87.6143354816,43.8129495288]);

    AMap.plugin('AMap.ToolBar',function(){//异步加载tool插件 
        var toolbar = new AMap.ToolBar();
        map.addControl(toolbar);
    });

    AMap.plugin(['AMap.Autocomplete','AMap.PlaceSearch'],function(){
      var autoOptions = {
        city: "全国", //城市，默认全国
        input: "tipinput"//使用联想输入的input的id
      };
      autocomplete= new AMap.Autocomplete(autoOptions);
      var placeSearch = new AMap.PlaceSearch({
            city:'全国',
            map:map
      })
      AMap.event.addListener(autocomplete, "select", function(e){
         //TODO 针对选中的poi实现自己的功能
         placeSearch.setCity(e.poi.adcode);
         placeSearch.search(e.poi.name);
      });
    });
    map.plugin('AMap.Geolocation', function() {
	  	var geolocation = new AMap.Geolocation({
		    // 是否使用高精度定位，默认：true
		    enableHighAccuracy: true,
		    // 设置定位超时时间，默认：无穷大
		    timeout: 10000,
		    // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
		    buttonOffset: new AMap.Pixel(10, 20),
		    //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
		    zoomToAccuracy: true,     
		    //  定位按钮的排放位置,  RB表示右下
		    buttonPosition: 'LB'
	  	});
	  	map.addControl(geolocation);
	  	geolocation.getCurrentPosition();
	  	AMap.event.addListener(geolocation, 'complete', onComplete);
	  	AMap.event.addListener(geolocation, 'error', onError);

	  	function onComplete (data) {
	    	// data是具体的定位信息
	    	myLngLat = data.position;
	    	localStorage.setItem("lat",myLngLat.lat);
	    	localStorage.setItem("lng",myLngLat.lng);
	  	}

	  	function onError (data) {
	    	// 定位出错
	  	}
	});

	var driving;
    AMap.plugin('AMap.Driving',function(){//异步加载tool插件 
        driving = new AMap.Driving({
        	map: map,
        	panel: "drivepanel"
    	}); 
    });
	var title;
	var content = [];
	var stationData;
	var pmarks = [];
	function getPrinter(){
		mui.ajax({
				url:"http://118.24.14.224/carStation/getAllStations.php",
				async: true,
				type:'post',
				dataType:'json',
				timeout:10000,
				success:function(data){
					stationData = data;
					displayStation(data);
				},
				error:function(xhr,type,errorThrown){
					plus.nativeUI.toast('获取打印机列表错误');
				}
		});
	}
	
	mui.plusReady(function(){
		getPrinter();
	});
	
	function displayStation(data){
		map.clearMap();
		for(var index in data){
			var marker;
			var pos = [data[index].s_lng, data[index].s_lat];
			AMap.convertFrom(pos, 'gps', function (status, result) {
				if (result.info === 'ok') {
			    	var lnglats = result.locations; // Array.<LngLat>
			    	var marker = new AMap.Marker({
		            	map: map,
		            	icon:"images/station.png",
		            	position: [lnglats[0].lng,lnglats[0].lat]
        			});
		        	//鼠标点击marker弹出自定义的信息窗体
			        AMap.event.addListener(marker, 'click', function() {
			        	for(index in pmarks){
			        		if(pmarks[index]==this) {
			        			initInfoWindow(index,[data[index].s_lng, data[index].s_lat]);
			        			break;
			        		}
			        	}
			        	//mui.alert(title);
			        	var infoWindow = new AMap.InfoWindow({
							isCustom: true,  //使用自定义窗体
							content: createInfoWindow(title, content.join("<br/>")),
							offset: new AMap.Pixel(16, -45)
						});
			            infoWindow.open(map, this.getPosition())
			        });
		        	pmarks.push(marker);
				}
			});
			
		}
	}
	function initInfoWindow(index,pos){
		title = stationData[index].s_name;
		content = [];
		content.push("<img src='./images/station.jpg' width='35%'>收费标准："+stationData[index].s_price+"&nbsp;元/h");
		content.push("剩余车位:"+stationData[index].s_remain);
		content.push("总车位数:"+stationData[index].s_amount);
		//content.push("管理公司:"+stationData[index].manager_name);
		content.push("<a href='#' onclick='gotoStation("+pos[1]+","+pos[0]+",\""+title+"\")'>到这里去</a>");
	}
	
	function gotoStation(lat,lng,name){
		var dst = new plus.maps.Point(lng,lat); // 终点 
		var src = new plus.maps.Point(116.335,39.966); // 起点
		// 调用系统地图显示 如果有多个地图，会提示选择
		plus.maps.openSysMap( dst, name, src );
	}
	
    var bind = function() {//
        var clickListener = AMap.event.addListener(map, "click", function(e) {
        	map.clearMap();
			new AMap.Marker({
				position: e.lnglat,
				map: map
			});
			pitchOnLngLat = e.lnglat;
			// 根据起终点经纬度规划驾车导航路线
			//mui.alert(pitchOnLngLat);
    		driving.search(myLngLat,e.lnglat);
		});
    };
	var mapdiv = document.getElementById('container');
    var listener1 = AMap.event.addDomListener(mapdiv, 'click', bind);//给div绑定单击事件

    function gotoUserCenter(){
    	mui.openWindow({
			url:'manager_station.html',
			id:'manager_station'
		});
    }
    
    
    

	

</script>
<script type="text/javascript" src="https://webapi.amap.com/demos/js/liteToolbar.js"></script>
</body>
</html>